It’s already 2017 and many of us are just thinking to start web development and machine learning, the area that are trending now and have a good future scope. Reading this article, you’ll have an idea about which path to follow on moving towards the learning of and practicing web development.

There are lots of new frameworks and tools for web development are coming out regularly. Recently I read an article on medium “A roadmap to becoming a web developer” where a map of all the web related technologies are listed. Here are the maps for those lazy enough not to open the aforementioned article.

Most of the people have question about how to start with web development from scratch.

I would suggest you to necessarily learn Git, before working on a project. If you know it already, it’s well and good.

FrontEnd

Simple… Start with HTM5, CSS3, JS. But why all and how?

 

                                     

Soure: https://www.freecodecamp.com/

 

Level A:

All of the first, You are required to learn HTML. Not even learn it, just know how to use it for various purposes.

You may go through https://www.w3schools.com for a reference. You will learn it while you use it.

Then once you know how to place and display content on your browser, learn to make that attractive and beautiful. Again don’t just learn, but practice also while doing.

Then comes the turn for JavaScript. I would recommend not to start with jQuery at this moment but first get yourself handy with VanillaJS (Plain old simple JavaScript).

Now, try to build a very small project for practice when you are more comfortable with working with a code editor, browser and displaying your code in the browser.

Level B:

Now increase your learning rate and start either with AngularJS or ReactJS. Choose any one and stick to it for a while. This could take a while to learn and would also require more effort but it is worth to learn.

Once you start with React or Angular you will start using lots of libraries. So for managing these libraries start learning yarn. Not NPM or BOWER but YARN.

Also try to learn SASS or LESS. It is optional but will help in long run.

Level C:

With all the libraries and optimizations you wish to include in your web page you would require the power of automation. Start GruntJS or GulpJS.

Level C.1:

With the completion of level C, you can successfully build a website front end using the latest technology trends. But for getting a step ahead learn TypeScript and BabelJS. Get familiar with RequireJS or WebPacks. Migrate from ReactJS to InfernoJS (Its smaller and faster).

My suggestion here is that, don’t use jQuery with AngularJS or ReactJS.

If still you want to experiment, try all the other technologies shown in the chart.  

Backend

Every site requires a backend to serve files and a lot of technologies are there for the same and it is all confusing.

 

                                         

Source: https://www.freecodecamp.com/  

Level A:

Start your backend with NodeJS. It’s because, I assume you learned JavaScript from frontend so moving on the same path start NodeJS. Use ExpressJS along with MongoDB for a complete JavaScript oriented stack.

Route 1:

Level 1:

Once you get a good idea of NodeJS use more advanced and interesting features like server side rendering, socket.io and automated testing methods. This will help you to get acquaint with more concepts of web development.

Level 2:

Move from callbacks and promises to async/await. Start linting your code. Deploy the code on AWS EC2 instance. Get your site running.

Then keep NodeJS aside and start GoLang. Its faster.

Route 2:

Level 1:

Move from NodeJS to Ruby on Rails. Although, you’ll notice that most of the code you had to write in NodeJS has already been implemented in Rails. But Rails has its own drawbacks so it won’t take you that far.

Level 2:

After few days of hands on with Rails move over to Django or Flask. The architecture is different to rails but the syntax is almost similar. Also, Django is more demanding as compared to Rails (as far as I know). Try to move to Unit testing and automations with django.

Common to all Routes:

Level 3:

Leave a single database concept and move to redis with a primary database. Feel the power of caching with redis or memcache.

Concepts to know:

·         JWT (JSON web token)

·         Nginx

·         Elasticsearch

·         Security

·         Shell Scripts

As of now I am not covering out the DevOps part else the amount of things you need to learn would become demotivating for you.

Sooo…Whats more? Go, Start now and share your after experience in comment section.